<template>
	<div class="content55">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">{{ $t('Entrega de oro') }}</div>
		</header>
		<div class="content">
			<div class="card">
				{{ $t('Thời gian thanh toán còn lại') }} <span class="color-r1">{{ formattedTime }}</span>
			</div>
			<div class="ditem">
				<div class="title">{{ $t('Số tiền chi tiêu') }}</div>
				<div class="pd">
					<div class="address color-r1">{{data.pay_money}}</div>
					<span class="right50 blue" @click="() => copy(String(data.pay_money))">{{ $t('Sao chép') }}</span>
				</div>
			</div>
			<div class="ditem">
				<div class="title">{{ $t('Tên ngân hàng') }}</div>
				<div class="pd">
					<div class="address">{{data.bank_name}}</div>
					<span class="right50 blue" @click="() => copy(String(data.bank_name))">{{ $t('Sao chép') }}</span>
				</div>
			</div>
			<div class="ditem">
				<div class="title">{{ $t('Tên chi nhánh') }}</div>
				<div class="pd">
					<div class="address">{{data.branch_name}}</div>
					<span class="right50 blue" @click="() => copy(String(data.branch_name))">{{ $t('Sao chép') }}</span>
				</div>
			</div>
			<div class="ditem">
				<div class="title">{{ $t('Số ghế miệng') }}</div>
				<div class="pd">
					<div class="address">{{data.bank_num}}</div>
					<span class="right50 blue" @click="() => copy(String(data.bank_num))">{{ $t('Sao chép') }}</span>
				</div>
			</div>
			
			<div class="ditem">
				<div class="title">{{ $t('Trước khi nổi tiếng') }}</div>
				<div class="pd">
					<div class="address">{{data.account_holder}}</div>
					<span class="right50 blue" @click="() => copy(String(data.account_holder))">{{ $t('Sao chép') }}</span>
				</div>
			</div>
			<div class="ditem">
				<div class="title">{{ $t('Tipo de extracción') }}</div>
				<div class="pd">
					<div class="address">{{data.transaction_type}}</div>
					<span class="right50 blue" @click="() => copy(String(data.transaction_type))">{{ $t('Sao chép') }}</span>
				</div>
			</div>
			<div class="ditem">
				<div class="title">{{ $t('Số') }}</div>
				<div class="pd">
					<div class="address">{{data.financial_institution_code}}</div>
					<span class="right50 blue" @click="() => copy(String(data.financial_institution_code))">{{ $t('Sao chép') }}</span>
				</div>
			</div>
			
			<div class="topup" @click="submit_api">{{ $t('Hỗ trợ trực tuyến') }}</div>
		</div>
	</div>
</template>


<script>
	import {
		getCurrentInstance
	} from 'vue'
	import useClipboard from "vue-clipboard3";
	import AJAX from '@/utils/http';
	export default {
		setup() {
			const {
				toClipboard
			} = useClipboard();
			const instance = getCurrentInstance()
			const copy = async (text) => {
				try {
					await toClipboard(text); //实现复制
					instance.appContext.config.globalProperties.$toast(this.$t('Đã sao chép thành công'));
				} catch (e) {
					console.error(e);
				}
			};
			return {
				copy
			};
		},
		data() {
			return {
				data:{},
				remainingSeconds:1800,
			}
		},
		computed: {
			formattedTime() {
				// 将剩余秒数格式化为分钟:秒的形式
				const minutes = Math.floor(this.remainingSeconds / 60);
				const seconds = this.remainingSeconds % 60;
				return `${this.padZero(minutes)}:${this.padZero(seconds)}`;
			},
		},
		created() {
			this.fetchData();
			// 每秒更新剩余秒数
			this.timer = setInterval(() => {
				if (this.remainingSeconds > 0) {
					this.remainingSeconds--;
				} else {
					this.$toast('Hết giờ');
					clearInterval(this.timer); // 计时结束时清除定时器
					this.$router.go(-1);
				}
			}, 1000);
		},
		beforeDestroy() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			submit_api(){
				window.open(this.data.kefu_link);
			},
			padZero(num) {
				// 将个位数补零
				return num < 10 ? `0${num}` : num;
			},
			fetchData() {
				AJAX.post('/index/pay', {
					ids: this.ids
				}, {
					showLoading: false
				}).then(e => {
					if (!e.code) {
						this.$toast(e.msg);
						this.$router.push('/');
						return;
					}
					this.data = e.data;
				});
			}
		}
	}
</script>

<style scoped>
	.topup{
		margin: 12px 25px;
	}
	
	.card {
		padding: 12px;
		font-size: 14px;
		background-color: #eff2f6;
		color: #999;
		text-align: center;
		margin-bottom: 12px;
	}




	.ditem .title {
		line-height: 24px;
		margin: 8px 0;
		font-size: 12px;
		color: #999;
	}
	
	.ditem .pd{
		flex: 1;
	}

	.ditem {
		padding: 0 25px;
		display: flex;
	}

	.ditem .input,
	.ditem .address {
		font-size: 14px;
		width: 100%;
	}

	.ditem .address {
		font-size: 13px;
		line-height: 22px;
		padding: 8px 11px;
		padding-right: 30px;
	}


	.uploadImg {
		position: relative;
		padding: 20px;
		border: 2px dashed var(--line-color);
		text-align: center;
		cursor: pointer;
		border-radius: 4px;
		margin: 0 25px;
		font-size: 12px;
		margin-top: 10px;
	}
</style>